<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./src/css/bootstrap.min.css">
  <link rel="stylesheet" href="./src/css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="./src/css/index.css" />
  <style>
    .modal.left .modal-dialog,
    .modal.right .modal-dialog {
      position: fixed;
      margin: auto;
      width: 320px;
      height: 100%;
      -webkit-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0)
    }

    .modal.left .modal-content,
    .modal.right .modal-content {
      height: 100%;
      overflow-y: auto
    }

    .modal.left .modal-body,
    .modal.right .modal-body {
      padding: 15px 15px 80px
    }

    .modal.left.fade .modal-dialog {
      left: -320px;
      -webkit-transition: opacity .3s linear, left .3s ease-out;
      -moz-transition: opacity .3s linear, left .3s ease-out;
      -o-transition: opacity .3s linear, left .3s ease-out;
      transition: opacity .3s linear, left .3s ease-out
    }

    .modal.left.fade.in .modal-dialog {
      left: 0
    }

    .modal.right.fade .modal-dialog {
      right: -320px;
      -webkit-transition: opacity .3s linear, right .3s ease-out;
      -moz-transition: opacity .3s linear, right .3s ease-out;
      -o-transition: opacity .3s linear, right .3s ease-out;
      transition: opacity .3s linear, right .3s ease-out
    }

    .modal.right.fade.in .modal-dialog {
      right: 0
    }

    .modal-content {
      border-radius: 0;
      border: none
    }

    .modal-header {
      border-bottom-color: #eee;
      background-color: #fafafa
    }
    .col-sm-12 .hidden-xs{
      width: 100%;
      display: flex; 
    }
    .box{
      display: flex;
      justify-content: space-between;
    }

     .a1 img{
      width: 200px;
      height: 100%;
      margin-left: 20px;
    } 
  .box1{
    width: 100%;
    height: 100px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
  }
  .box1 div{
    width: 20%;
    height: 60px;
    margin-left: 10px;

  }
  .section--header{
    overflow: hidden;
  }
  .fenlan{
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .fenlan div{
    width: 200px;
    height: 200px;
    margin-left: 20px;
  }
  .fenlan div img{
     width: 100%;
     height: 100%;
  }
  .fenlan2{
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .fenlan2 div{
    padding: 30px 0;
    width: 200px;
    height: 250px;
    border: 1px solid #ccc;
    margin-left: 20px;
  }
  .fenlan2 h2{
    font-size: 20px;
  }
  .fenlan2 div p{
    margin-top: 40px;
  }
  .fenlan2 div .p3{
    margin-top: 40px;
  }
  .fenlan2 div img{
     width: 100px;
     height: 50px;
  }
  .container{
    width: 100%;
    height: 200px;
    margin-top: 20px;
    background-image: url(./src/img/轮播1.jpg) ;

  }
  .fenlan3{
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
  }
  .fenlan3 div{
    text-align: center;
    width: 200px;
    height: 200px;
    border: 1px solid #ccc;
  }
  .fenlan3 div p{
    width: 200px;
    height: 80px;
    margin-top: 20px;
  }
  .fenlan3 div p img{
    width: 80px;
    height: 60px;

  }
  
  .fenlan4{
    width: 95%;
    height: 100%;
    margin: auto;
    display: flex;
    margin-top: 20px;
    justify-content: space-around;
    background-image: url(./src/img/轮播1.jpg);
    
  }
  .fenlan4 ul{
    width: 25%;
    padding: 20px 0;
    margin-left: -10px;
    
  }
  .fenlan4 ul li{
    margin-top: 20px;
    
  }
  .fenlan4 ul li a{
    color: #888;
  }



   
 
  
  </style>
</head>

<body>
  <!-- 头部 -->
  <div class="row">
    <!-- 大屏幕下的头部 -->
    <div class="col-sm-12 hidden-xs">
      大屏下的头部
      <!-- header -->
      <div class="box">
        <div class="a1"><img src="/src/img/logo.png" alt="" srcset=""></div>
        <div class="a2">
          <p>028-67871837</p>
          <p>周一 - 周五, 8:00 - 20:00</p>
        </div>
        <div class="a3">
          <p>kefu@xfc123.com</p>
          <p>随时欢迎您的来信！</p>
        </div>
        <div class="a4">
          <p>菁蓉国际广场</p>
          <p>天府五街200号4栋5楼A15</p>
        </div>
        <div class="a5">
          <button>联系我们</button>
        </div>
      </div>
      <!-- 切换 -->
      <div class="box1">
        <div>首页</div>
        <div>解决方案</div>
        <div>案例精选</div>
        <div>新闻中心</div>
        <div>关于我们</div>
        <div>加入我们</div>
        <div>联系我们</div>
    </div>

    <div class="main">
      <div id="slide">
        <!-- ul:轮播图片 （宽高一致） -->
        <ul>
          <li class="selected">
            <!-- <img src="img/轮播1.jpg" /> -->
            <div class="am-u-md-12 am-u-sm-centered ll">
              <h1 class="slide_simple--title">公众号小程序</h1>
              <p class="slide_simple--text am-text-center">基于腾讯微信公众号和小程序的研发，和用户体系实现互联互通、集成支付、扫码、摇一摇、蓝牙、定位等功能，搭建企业会员体系、完成企业推广任务！</p>
              <div class="slide_simple--buttons"><a type="button" class="am-btn am-btn-danger" href="/solution/wechat" title="关于小风车科技">了解更多</a></div>
            </div>
          </li>
          <li>
            <div class="am-u-md-12 am-u-sm-centered">
              <h1 class="slide_simple--title">移动APP应用</h1>
              <p class="slide_simple--text am-text-center">制作Android、iOS以及WebAPP应用程序，兼容主流分辨率，实现移动支付(微信、支付宝、银联卡等)、LBS定位、红包、团购等多业务场景，帮助企业实现移动互联网化！</p>
              <div class="slide_simple--buttons"><a type="button" class="am-btn am-btn-danger" href="/solution/mobile" title="移动APP应用">了解更多</a></div>
            </div>
          </li>
          <li>
            <div class="am-u-md-12 am-u-sm-centered">
              <h1 class="slide_simple--title">网站及UI设计</h1>
              <p class="slide_simple--text am-text-center">网站满足企业的UI设计需求，使用主流的设计思想及远离，使用Bootstrap、jQuery等前端框架，搭建适配手机及iPad的移动网页，网站兼容市面主流的浏览器及移动终端！</p>
            </div>
          </li>
          <li>
            <div class="am-u-md-12 am-u-sm-centered">
              <h1 class="slide_simple--title">行业应用开发</h1>
              <p class="slide_simple--text am-text-center">公司致力于法院、工商、医疗、海关、教育等行业软件研发和软件外包、大数据、金融服务业务、IT技术培训等业务，为传统企业的转型提供OA、ERP、CRM等专业的行业应用。</p>
              <div class="slide_simple--buttons"><a type="button" class="am-btn am-btn-danger" href="/solution/application" title="关于小风车科技">了解更多</a></div>
            </div>
          </li>
        </ul>
        <!-- 可点击的小图片区域 （宽高也保持一个值）--> 
       <ol>
          <li class="active">1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ol>
      </div>

      <div class="section--header">
        <h2 class="section--title">核心优势</h2>
        <p class="section--description">
          团队核心人员均来自华为、中移动等大公司，技术实力雄厚，拥有互联网大数据、高并发项目案例，能准确把握和挖掘用户需求。
          <br>小风车立足互联网及移动互联网，在教育、医疗、公安、工商、税务等领域有卓越的建树。
        </p>
      </div>

      <div class="fenlan">
        <div>
          <img src="./src/img/f01.jpg" alt="">
        </div>
        <div>
          <img src="./src/img/f02.jpg" alt="">
        </div>
        <div>
          <img src="./src/img/f03.jpg" alt="">
        </div>
        <div>
          <img src="./src/img/f04.jpg" alt="">
        </div>
      </div>

      <div class="section--header">
        <h2 class="section--title">我们的服务</h2>
        <p class="section--description">
          提供移动APP开发,微信公众号、小程序开发，行业应用开发，网页设计及制作，以及系统集成服务，擅长帮助企业分阶段完成IT规划和建设。
          <br>自主软件研发、大数据、金融服务等。
        </p>
      </div>

      <div class="fenlan2">
        <div>
          <img src="./src/img/phone.png" alt="">
          <h2>APP制作</h2>
          <p>Android、iOS两端应用研发，集成支付、订单、红包、抢购、IM、直播等服务。</p>
        </div>
        <div>
          <img src="./src/img/weixin.png" alt="">
          <h2>公众号小程序</h2>
          <p>集成微信用户体系、支付、卡包、扫码等业务，满足企业个性化需求。</p>
        </div>
        <div>
          <img src="./src/img/inter.png" alt="">
          <h2>网站设计及制作</h2>
          <p class="p3">专业的UI设计，采用行业主流的扁平化设计风格，完美适配手机移动端。</p>
        </div>
        <div>
          <img src="./src/img/service_oa.png" alt="">
          <h2>行业软件定制</h2>
          <p>为传统行业定制OA、ERP、CRM、HIS、LIS等行业应用，提高行业信息化进程。</p>
        </div>
      </div>

    
      <div class="container">
        <h2 class="promo_banner--title">期待您的加入</h2>
        <p class="promo_banner--text">
					我们于2015年5月7号成立，正用自己的技术力量一步一步改变世界。
					<br> 我们运用目前行业前沿的大数据框架及技术改造教育、医疗等行业，让技术成为生产力。
					<br> 小风车科技，我们的目标是打造一个小而美的企业，和企业一起成长。
        <footer class="promo_banner--footer">
					<a type="button" class="am-btn am-btn-secondary" href="/joinus" title="加入小风车科技">MORE>></a>
				</footer>
      </div>

      <div class="fenlan3">
        <div>
          <p><img src="./src/img/telphone.png" alt=""><span>联系我们</span></span></p>
          <p>拨打我们的电话
            (+86)(028)67871837
            周一 - 周五, 8:00 - 20:00</p>
        </div>
        <div>
          <p><img src="./src/img/email.png" alt=""><span>电子邮箱</span></p>
          <p>给我们发送电子邮件
            kefu@xfc123.com,
            我们会尽快回复您.</p>
        </div>
        <div>
          <p><img src="./src/img/address.png" alt=""><span>地址信息</span></p>
          <p>公司办公地址
            菁蓉国际广场, 成都,
            4栋B座A15</p>
        </div>
        
      </div>


      <div class="fenlan4">
        <ul>
          <h2>关于我们</h2>
          <li>
            <p>以客户需求为导向，以客户价值为目标，以客户满意为标准 
              坚持变革，倡导创新，持续成长。 
              快速反应，快速决策，快速行动 
              企业与员工共同成长， 
              专注主营业务。</p>
          </li>
          <li>
            <p>认真做事，小而美！ Small</p>
          </li>
         
        </ul>
          <ul>
            <h2>解决方案</h2>
            <li><a href="">移动应用解决方案</a> </li>
            <li> <a href="">微信生态圈解决方案</a> </li>
            <li><a href="">行业应用解决方案</a> </li>
            <li><a href="">小风车案例精选</a> </li>
          
          </ul>
         
          <ul>
            <h2>小风车导航</h2>
            <li> <a href="">小风车客户案例</a>   </li>
            <li><a href="">微信生态圈解决方案</a> </li>
            <li><a href="">行业应用解决方案</a></li>
            <li><a href="">小风车案例精选</a></li>
          </ul>
          <ul>
            <h2>联系我们</h2>
            <li> <a href=""> 服务专线,028-67871837</a></li>
            <li> <a href="">kefu@xfc123.com</a></li>
            <li><a href="">高新区菁蓉国际广场4栋5楼A15</a></li>
            <li><a href="">周一 - 周五, 8:00 - 20:00</a></li>
            <li> <a href="">蜀ICP备15020376号-1</a></li>
          </ul>
            
           </div>

           
         





     


  

    <div class="col-xs-12 visible-xs">
      <!-- 小屏幕的头部 -->
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <a class="navbar-brand" href="#">
              <i role="left" data-toggle="modal" data-target="#myModal" class="glyphicon glyphicon-align-justify"></i>
            </a>
          </div>
        </div>
      </nav>
      <!-- 折叠的菜单 -->
      <div class="modal left fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title" id="myModalLabel">弹窗标题</h4>
            </div>
            <div class="modal-body">
              <ul>
                <li>首页</li>
                <li>解决方案</li>
                <li>案例精选</li>
                <li>新闻中心</li>
                <li>关于我们</li>
                <li>加入我们</li>
                <li>联系我们</li>
              </ul>
            </div>
           
          </div>
        </div>
      </div>
      <div><img src="./src//img/logo.png" alt=""></div>
    </div>

  <!-- </div> -->


  <script src="./src/js/jquery.min.js"></script>
  <script src="./src/js/bootstrap.min.js"></script>
  <script src="./src/js/jquery-3.4.1.js"></script>
  <script src="./src/js/index.js"></script>
  <script>

  </script>
</body>

</html>